<template>
  <view class="landing-index">
    <view class="landing-head-top">
      <image src="/static/images/log1.png"
             mode="widthFix"></image>
    </view>
    <view class="landing-banner img-row">
      <image src="/static/images/landing_banner.png"
             mode="widthFix"></image>
    </view>
    <view class="landing-brand img-row">
      <image src="/static/images/landing_brand_bg.png"
             mode="widthFix"></image>
    </view>
    <view class="landing-service">
      <view class="p7 text-center">特色服务</view>
      <view class="p2 text-center">CHARACTERISTIC SERVICE</view>
      <view class="m-flex m-row-between m-col-top landing-service-list">
        <view class="service-list-item img-row text-center"
              @click="toService(item)"
              v-for="(item,index) in service_list"
              :key="index">
          <image :src="item.img"
                 mode="widthFix"></image>
          <view>{{item.title}}</view>
          <view>{{item.content}}</view>
        </view>
      </view>
    </view>
    <view class="landing-introduce img-row">
      <image src="/static/images/gongsijieshao.png"
             mode="widthFix"></image>
    </view>
    <view class="landing-footer img-row">
      <image src="/static/images/landing_footer.png"
             mode="widthFix"></image>
    </view>
  </view>
</template>

<script>
export default {
  data () {
    return {
      service_list: [
        { img: '/static/images/wangshangkaihu.png', title: '网上开户', content: 'Open an account online' },
        { img: '/static/images/xianhuoshangpin.png', title: '现货商品', content: 'Spot financing' },
        { img: '/static/images/lianxikefu.png', title: '联系客服', content: 'Billing guide' },
        { img: '/static/images/gerenzhongxin.png', title: '个人中心', content: 'Warehousing logistics' }
      ]
    }
  },
  methods: {
    toService (item) {
      this.$Router.push('/pages/login/login')
    }
  }
}
</script>

<style lang="scss" scoped>
  page {
    background-color: $uni-bg-color;
  }
  .landing-head-top {
    padding: $m-padding 0;
    image {
      width: 200rpx;
    }
  }
  .landing-service {
    padding: $m-padding 0;
    line-height: 1.5;
    .landing-service-list {
      margin: $m-margin 0;
      .service-list-item {
        width: 22%;
        line-height: 1.5;
      }
    }
  }
</style>
